<template>
	<view class="container">
		<view class="top">
			<view class="topBar">
				<view v-if="this.isEdit === true" class="top-left" @tap="cancel">取消</view>
				<view v-else class="top-left" @tap="returnTo" style="font-size: 30px;"><</view>
				<view class="top-center">地图管理</view>
				<view v-if="this.isEdit === false" class="top-edit" @tap="toEdit">编辑</view>
				<view v-else class="top-edit" @tap="saveEdit">保存</view>
			</view>
		</view>
		<view style="height: 70px;"></view>
		<map class="myMap"
			:show-location="true" :longitude="longitude" :latitude="latitude" :markers="markers" show-compass="true"
			scale="20" >
		</map>
<!-- 		<view style="display: flex;align-items: center;justify-content: center;height: 20px;">
			<uni-icons type="bars" size="20" class="toggleIcon"></uni-icons>
		</view> -->
		<view class="route-body">
			
			<view class="route-view" v-for="(route , index) in routes" key="index">
				<view class="left">
					<view class="route-name" v-if="this.isEdit === false">{{route.mapName}}</view>
					<input v-else class="route-name" :value="route.mapName"></input>
					<!-- <view class="route-date">创建时间: {{formatDate(route.mapDate)}}</view> -->
				</view>
					<button v-if="this.isEdit === true" class="edit-btn" type="warn" @tap="deleteRoute(index)">删除</button>
					<view v-else style="font-size: 30px;margin-left: 20px;" @tap="routeInfo(route)">></view>
			</view>
		</view>
	</view>
</template>

<script>
import request from "../../../common/request.js"
export default {
	data() {
		return {
			isEdit: false,
			mapId: 1,
			routes:[],
			latitude: 0, // 纬度
			longitude: 0, // 经度
			markers: [], // 地图标记点
		}
	},
	onShow(){
		this.initMap()
	},
	onLoad(){
		
	},
	methods: {
		toEdit(){
			this.isEdit = true
		},
		saveEdit(){
			this.isEdit = false
		},
		cancel(){
			this.isEdit = false
		},
		initMap(){
			request(`/inspection/map/${this.mapId}`,'GET').then(res =>{
				console.log("查看总地图")
				console.log(res)
				
				this.markers = res.data.data.map(item => ({
					id: item.mapDetailId,
					latitude: item.mapLatitude, 
					longitude: item.mapLongitude,
					iconPath: '/static/locationpng.png',
					width: 20, // 设置标记宽度
					height: 20, // 设置标记高度
					label: {
						content: item.mapDetailDesc, 
						color: '#000',
						fontSize: 14,
						anchorX: -10,
						anchorY: -40,
					}
				}))
				this.getCenterPoint(this.markers)
			})
			this.getRoutes()

		},
		getCenterPoint(maskerList){
			// 计算中心点坐标
			let minLat = maskerList[0].latitude;
			let maxLat = maskerList[0].latitude;
			let minLng = maskerList[0].longitude;
			let maxLng = maskerList[0].longitude;
			
			for (let i = 1; i < maskerList.length; i++) {
			  const marker = maskerList[i];
			  minLat = Math.min(minLat, marker.latitude);
			  maxLat = Math.max(maxLat, marker.latitude);
			  minLng = Math.min(minLng, marker.longitude);
			  maxLng = Math.max(maxLng, marker.longitude);
			}
			
			const centerLat = (minLat + maxLat) / 2;
			const centerLng = (minLng + maxLng) / 2;
			this.latitude = centerLat
			this.longitude = centerLng
		},
		deleteRoute(index){
			uni.showModal({
				content:"确定要删除该路线吗，此操作不可删除！",
				success: (res)=>{
					if(res.confirm){
						console.log("删除路线")
						request(`/inspection/map/${this.routes[index].mapId}` , 'DELETE').then(res => {
							console.log("删除路线") 	
							console.log(res)
							if(res.data.message == 'SUCCESS'){
								this.routes.splice(index , 1)
							}
							
						})
					}
				}
			})
		},
		returnTo(){
			uni.navigateBack()
		},
		routeInfo(route){
			uni.navigateTo({
				url:'/pages/map/routeInfo/routeInfo?route=' + encodeURIComponent(JSON.stringify(route))
			})
		},
		getRoutes(){
			request('/inspection/map/nopage','GET').then(res=>{
				console.log("输出路线")
				console.log(res)
				this.routes = res.data.data
			})
		},
		formatDate(dateString) {
		  if (!dateString)
			return ' '
		
		  // 正则表达式匹配日期格式，处理时区格式+00:00
		  const regex = /^(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2}:\d{2})\.\d{3}(?:[+-]\d{2}:\d{2})?$/;
		  const match = dateString.match(regex);
		  if (match) {
		    return `${match[1]} ${match[2]}`;
		  }
		  return 'Invalid Date';
		}
	}
}
</script>

<style scoped>
.container{
	display: flex;
	flex-direction: column;
	height: 100vh; /* 确保容器占满整个视口 */
	overflow-y: clip;
	background-color: #fff;
}
.top{
	position: fixed;
	top: 0; /* 设置顶部位置 */
	width: 100%; /* 宽度100% */
	z-index: 10; /* 确保在其他元素之上 */
	color: #fff;
}
.topBar{
	background-color: #0A60BD;
	display: flex;
	align-items: center;
	padding: 10px;
	padding-top: 25px;
}
.top-left{
	width: 10%;
}
.top-center{
	font-size: 30px;
	text-align: center;
	width: 80%;
}
.top-edit{
	width: 10%;
	display: flex;
	align-items: end;
}
.myMap{
	position: relative;
	z-index: 1;
	width: 100%;
	flex: 1;
}
.icon{
	background-color: transparent;
}
.route-body{
	overflow-y: auto;
	z-index: 10;
	height: 40%;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.route-view{
	width: 90%;
	display: flex;
	margin-top: 5px;
	background-color: #fff;
	height: 60px;
	align-items: center;
	padding: 10px;
	border-radius: 25px;
}
.left{
	width: 80%;
	margin-left: 5px;
}
.route-name{
	font-size: 28px;
}
.route-date{
	margin-top: 8px;
	margin-left: 20px;
}
.edit-btn{
	border-radius: 10px;
	height: 35px;
	font-size: 15px;
}
.toggleIcon{
	position: fixed;
	background-color: #f5f5f5;
	width: 60px;
	border-top-left-radius: 10px; /* 左上角圆角 */
	border-top-right-radius: 10px; /* 右上角圆角 */
}
</style>

